<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0, user-scalable=no">
    <title>欢迎参加考试</title>
    <link rel="stylesheet" href="css/style.css">
    <link href="css/jquery.searchableSelect.css" rel="stylesheet" type="text/css">
    <script src="js/jquery-1.11.1.min.js"></script>
    <script src="js/jquery.searchableSelect.js"></script>
    <link rel="stylesheet" href="js/layui/css/layui.css">
    <script src="js/layui/layui.js"></script>
</head>
<body class="login-bg">
<div class="login-contain">
    <div class="login-header">
        <p>江苏省三基争霸赛海选</p>
        <p>欢迎参加考试</p>
    </div>
    <div class="form-group">
        <form id="form" class="layui-form">
            <label class="layui-form-label" style="width: 89%;text-align:center">若输入医院无搜索结果，可删除一个字</label>
            <div class="layui-input-inline" style="color:black;width: 99%">
                <select id="hospital" name="hospital" lay-verify="required" lay-search="">
                    <option value="">请选择医院</option>
                </select>
            </div>
            <div class="form-item">
                <input id="name" name="name" type="text" placeholder="请输入姓名">
            </div>
            <div class="form-item">
                <input id="phone" name="phone" type="phone" placeholder="请输入手机号">
            </div>
            <label class="layui-form-label"></label>
            <div class="layui-input-inline" style="color:black;width: 99%">
                <select id="city" name="city" lay-verify="required">
                    <option value="">请选择城市</option>
                    <option value="南京市">南京市</option>
                    <option value="苏州市">苏州市</option>
                    <option value="无锡市">无锡市</option>
                    <option value="常州市">常州市</option>
                    <option value="镇江市">镇江市</option>
                    <option value="南通市">南通市</option>
                    <option value="泰州市">泰州市</option>
                    <option value="扬州市">扬州市</option>
                    <option value="盐城市">盐城市</option>
                    <option value="淮安市">淮安市</option>
                    <option value="连云港市">连云港市</option>
                    <option value="宿迁市">宿迁市</option>
                    <option value="徐州市">徐州市</option>
                </select>
            </div>
            <div class="form-item">
                <input id="department" name="department" type="department" placeholder="请输入科室">
            </div>
        </form>
    </div>
    <div class="button-group">
        <button class="login-btn" id="submit" lay-submit="" lay-filter="submit">进入考试</button>
        <label class="layui-form-label" style="width: 89%;text-align:center">备注：进入考试后，计时开始</label>
    </div>
</div>

<script>
    //一般直接写在一个js文件中
    layui.use(['layer', 'form'], function () {
        var layer = layui.layer
            , form = layui.form;
        $.ajax({
            type: "POST",
            url: "http://127.0.0.1:8083/examSystem/web/hospitalInfo",
            data: null,
            dataType: 'json',
            success: function (result) {
                var datas = "";
                var data = result.data;
                for (var i = 0; i < data.length; i++) {
                    // var text = data[i].rtContent.replace(/<\/?.+?>/g,"").replace(/ /g,"");
                    datas += "<option value='" + data[i].id + "'>" + data[i].hospitalname + "</option>";
                }
                $('#hospital').append(datas);
                form.render('select');
            },
            error: function (error) {
            }
        });

        //监听提交
        form.on('submit(submit)', function (data) {
            var name = $("#name").val();
            if (name == '') {
                alert('姓名未填写');
                return;
            }
            var phone = $("#phone").val();
            if (phone == '') {
                alert('手机号未填写');
                return;
            }
            if(!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(phone))){
                alert("手机号码有误，请重填");
                return;
            }
            var city = $("#city").val();
            if (city == '') {
                alert('城市未填写');
                return;
            }
            var department = $("#department").val();
            if (department == '') {
                alert('科室未填写');
                return;
            }
            var hospital = $("#hospital").val();
            if (hospital == '') {
                alert('医院未选择');
                return;
            }
            $.ajax({
                type: 'post',//方法类型
                dataType: 'json',//预期服务器返回的数据类型
                url: 'http://127.0.0.1:8083/examSystem/web/toExam',
                data: $('#form').serialize(),
                success: function (result) {
                    if (result.code == 0) {
                        window.location.href = "paper.html?phone=" + phone;
                    } else {
                        alert(result.msg);
                    }
                },
                error: function () {
                    layer.msg('保存失败', {icon: 2});
                }
            });
            return false;
        });
    });
    $(function () {
        $(window).resize();
    });
    //js设置居中
    $(window).resize(function () {
        $(".login-contain").css({
            position: "absolute",
            left: ($(window).width() - $(".login-contain").outerWidth()) / 2,
            top: ($(window).height() - $(".login-contain").outerHeight()) / 2.5
        });
    });

</script>
</body>
</html>
